<%@page import="com.mconnect.msurvey.model.Report"%>
<%@page import="com.mconnect.msurvey.model.SurveyPlan"%>
<%@page import="com.mconnect.msurvey.controller.PlanManager"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.mconnect.msurvey.controller.UserManager"%>
<%@page import="com.mconnect.msurvey.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="s" uri="/struts-tags"%>
 <% if(request.getParameter("pageNumber") == null){ %>     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Panel Admina</title>
  <link rel="stylesheet" href="resources/css/ap.css">
  <link rel="stylesheet" href="js/jQuery/themes/base/jquery.ui.all.css">
  <link rel="stylesheet" href="js/jQuery/demos.css">
  <link rel="stylesheet" href="resources/css/detail_style.css">
  
	<script src="js/jQuery/jquery-1.8.2.js"></script>
	<script src="js/jQuery/ui/jquery.ui.core.js"></script>
	<script src="js/jQuery/ui/jquery.ui.widget.js"></script>
	<script src="js/jQuery/ui/jquery.ui.tabs.js"></script>
	
	<style>
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		th#plan { border: 1px solid #eee; padding: .6em 10px; text-align: left; text-align: center; height: 30px;}
		td#plan { border: 1px solid #eee; padding: .2em 2px; text-align: left; text-align: center; height: 30px;}
	</style>
  
  </head>
<script>
	$(function() {
		$( "#tabs" ).tabs({
			beforeLoad: function( event, ui ) {
				ui.jqXHR.error(function() {
					ui.panel.html(
						"Niestety, ale nie udało się załadować tej strony. " +
						"Spróbuj ponownie." );
				});
			}
		});
	});
</script>
<body>
<div id="top">
   
    <div class="sessionUser">
    	<div id="logoMconnect">
    		<img src="resources/images/top_logo.gif" width="84" height="59" alt="image001"/>
    	</div>
    	<div id="mConnect_txt">
        	mConnect<br/>al. Jana Pawła II 41c<br/>31-864 Kraków
       </div>
    	
	     <% User admin = (User)session.getAttribute("admin"); 
			if(admin == null){ %>
				<jsp:forward page="loginAdminForm.jsp"></jsp:forward>
		<%}%>
    </div>
    <img src="resources/images/kreska.png" class="kreska">
    <div class="header_txt">
      <a href="adminPanel.jsp" style="text-decoration: none;">
     		<p class="header_txt_1">mSurvey</p>
      		<p class="header_txt_2">Panel Administratora</p>
      	</a>
    </div>
    <ul id=menu>
      
    <li><s:a action="goToSearchSurvey"> Wyszukaj ankietę </s:a></li>
	<li><s:a action="goToCampaigns">+Kampanie+</s:a></li>
	<li><s:a action="goToRegisterUser">Dodaj ankietera</s:a></li>
	<li><s:a action="goToConfirmList">Potwierdziły przybycie</s:a></li>
	<li><s:a action="goToReports">Raporty</s:a></li>
	<li style="float: right"><s:a action="logoutAdmin">Wyloguj</s:a></li>
    </ul>
    
    <div id=kategorie>
    
    	<div style="float: left; width: 96%; margin-left: 2%;">
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Kampanie</a></li>
				<li><a href="campaigns/addNewCampaign.jsp">Dodaj nową kampanie</a></li>
				<li><a href="campaigns/price-list.jsp">Cenniki Kampani</a></li>
			</ul>
			
			<div id="tabs-1">
			<h1 style="text-align: center;">Kampanie</h1>
			<%} %>
			<script>
				$(function() {
					
					$('#nextPage').click(function(){
						var startPage = parseFloat($( "#next" ).val());
						var page = startPage + 1;
							
						$.get(
							'goToCampaigns.action',
							{
								pageNumber: page,
											
							},
							function (content) {
								$('#users-contain').html(content);
								$( "#next" ).val(page);
								return false;
							}
						);
							
						});
					
					$('#previousPage').click(function(){
						var startPage = parseFloat($( "#next" ).val());
						var page = startPage - 1;
						
						if(page >= 1){
							$.get(
								'goToCampaigns.action',
								{
									pageNumber: page,
								},
								function (content) {
									$('#users-contain').html(content);
									$( "#next" ).val(page);
									return false;
								}
							);
							
						}	
					});
				});
			</script>
			
			<%	
				List<SurveyPlan> planList = (List<SurveyPlan>)request.getAttribute("planList");
				if(planList.isEmpty() && request.getParameter("pageNumber") == null){ %>
					<div class="ui-widget" style="width: 80%; margin-left: 10%;">
						<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
							<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
							<strong>Nie ma utworzonych żadnych planów.</strong> <br /><br /> Utwórz nowy plan.</p>
						</div>
					</div>
				
				<%}else{ PlanManager pM = new PlanManager(); %>
				<center>
				<div id="users-contain" class="ui-widget">
					<table id="users" class="ui-widget ui-widget-content" style="width: 1000px; ">
					<thead>
					<tr class="ui-widget-header ">
						<th width="100px;" id="plan">Nazwa kampani</th>
						<th  width="100px;" id="plan">Plan zatrudnienia</th>
						<th width="50px;" id="plan">Cel</th>
						<th width="150px;" id="plan">Ilość dni, ilość godzin</th>
						<th width="100px;" id="plan">Złożone</th>
						<th id="plan">Potwierdziło przybycie</th>
						<th width="100px;" id="plan">Średnia dzienna ilość ankiet</th>
						<th id="plan">Realizacja planu</th>
						<th id="plan">Pozostało sztuk</th>
						<th id="plan">Status</th>
						<th id="plan">X</th>
					</tr>
					<tbody>
						<% 
							for(SurveyPlan plan : planList){
								Report report = pM.getReportByIdPlan(plan.getId_plan(), "", "");
// 								int numberOfSurveys = pM.getNumberOfSurveys(plan.getId_plan());
// 								int numberOfConfirms = pM.getNumberOfConfirms(plan.getId_plan());
								int numberOfSurveys = report.getTotalSurveys();
								int numberOfConfirms = report.getNumberOfConfirms();
								double average = pM.getRealizationOfPlan(numberOfConfirms, numberOfSurveys);
								long averageSurveys = pM.getAveregeSurveysOnDay(plan.getCreateDate(), plan.getEndDate(), numberOfSurveys);
									
								
						%>
							<tr>
								<td id="plan"><%= plan.getPlanName() %></td>
								<td id="plan"><%= plan.getUsersNumber() %></td>
								<td id="plan"><%= plan.getGoal() %></td>
								<td id="plan"><%=plan.getDays() %>dni (po <%=plan.getHours() %> godz.) = <%=plan.getDays() * plan.getHours() %>  godz. </td>
								<td id="plan"><%= numberOfSurveys %></td>
								<td id="plan"><%= numberOfConfirms %></td>
								<td id="plan"><%=averageSurveys %></td>
								<td id="plan"><%=average %>%</td>
								<td id="plan"><%= plan.getGoal()-numberOfSurveys %></td>
								<td id="plan"><%= plan.getStatus() %></td>
								<td id="plan" title="Zakończ">
									<% if(plan.getStatus().equals("w trakcie")){ %>
									<div>
										<a href="closePlan?id_plan=<%=plan.getId_plan() %>" style="display: block"><img alt="" src="resources/images/end.png"></a>
									</div>
									<%} %>
								</td>
							</tr>	
						<%} %>
						<tr>
							<td colspan="11" id="plan">
								<div>
									<div style="float: left; margin-top: 3px;"><a href="#" id="previousPage" style="display: block;"><img alt="Previous" src="resources/images/previous.png"> </a></div>
									<div style="float: left; margin-left: 5px; "><input type="text" id="next" style="width: 20px; text-align: center;"  value="1" ></div>
									<div style="float: left; margin-left: 5px; margin-top: 3px;"><a href="#" id="nextPage" style="display: block;"><img alt="Next" src="resources/images/next.png"> </a> </div>
								</div>
							</td>
						</tr>
					</tbody>	
				</table>
				</div>
				</center>
				<%} %>
			</div>
		</div>
   </div>
   </div>	 
</div>
  </body>
</html>